<style type="text/less" lang="less" scoped>
@import url("./index.less");
</style>

<template>
  <el-container>
    <el-main class="content-main">
      <div class="ps-panel" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">列表</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="updateLexicon"
              >更新外部词典</el-button
            >
            <el-button type="primary" size="mini" @click="add"
              >添加模型</el-button
            >
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="tableData"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="state" label="状态" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row['state'] == 0">未训练</span>
                <span v-else-if="scope.row['state'] == 1">正在训练</span>
                <span v-else-if="scope.row['state'] == 2">训练停止</span>
                <span v-else-if="scope.row['state'] == 3">重新训练</span>
                <span v-else-if="scope.row['state'] == 4">训练成功</span>
                <span v-else-if="scope.row['state'] == 5">训练失败</span>
              </template>
            </el-table-column>
            <el-table-column prop="enable" label="是否激活" width="100">
              <template slot-scope="scope">
                {{ scope.row["enable"] == 1 ? "激活" : "未激活" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="addtime"
              label="添加时间"
              width="150"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
              <template slot-scope="scope">
                <template v-if="scope.row['state'] == 0">
                  <el-button type="text" size="small" @click="cmd(scope.row, 1)"
                    >开始训练</el-button
                  >
                </template>
                <template
                  v-else-if="[1, 2, 4, 5].indexOf(scope.row['state']) != -1"
                >
                  <el-button type="text" size="small" @click="cmd(scope.row, 3)"
                    >重新训练</el-button
                  >
                </template>
                <template v-if="[1, 3].indexOf(scope.row['state']) != -1">
                  <el-button type="text" size="small" @click="cmd(scope.row, 2)"
                    >停止训练</el-button
                  >
                </template>
                <template v-if="scope.row['state'] == 4">
                  <el-button
                    type="text"
                    size="small"
                    @click="cmd(scope.row, 99)"
                    >激活模型</el-button
                  >
                </template>
                <template v-if="[0, 2, 4, 5].indexOf(scope.row['state']) != -1">
                  <el-button type="text" size="small" @click="edit(scope.row)"
                    >编辑</el-button
                  >
                  <el-popover
                    style="margin-left: 10px"
                    width="160"
                    trigger="manual"
                    :ref="'del_popover_' + scope.row.id"
                  >
                    <p style="text-align: center; margin: 15px 0px">
                      确定删除吗？
                    </p>
                    <div style="text-align: center; margin: 0">
                      <el-button
                        size="mini"
                        @click="delPopoverClose('del_popover_' + scope.row.id)"
                        >取消</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="del(scope.row)"
                        >确定</el-button
                      >
                    </div>
                    <el-button
                      type="text"
                      slot="reference"
                      size="small"
                      @click="delPopoverShow('del_popover_' + scope.row.id)"
                      >删除
                    </el-button>
                  </el-popover>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="jump"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <el-dialog
      title="模型"
      :visible.sync="modelForm.visible"
      width="800px"
      class="edit"
    >
      <el-form
        ref="form"
        :model="modelForm"
        :rules="modelForm.rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="模型名称：" prop="name">
              <el-input
                v-model="modelForm.name"
                maxlength="20"
                placeholder="请输入模型名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="训练数量：" prop="learn_count">
              <el-input-number
                v-model="modelForm.learn_count"
                :min="1"
                :max="100000"
                placeholder="请输入训练数量"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="正则规则：">
          <el-transfer
            v-model="modelForm.regular_rule"
            :data="Object.values(regular_rules)"
            :titles="['未选择', '已选择']"
          ></el-transfer>
        </el-form-item>
        <el-form-item label="语法规则：">
          <el-transfer
            v-model="modelForm.grammar_rule"
            :data="Object.values(grammar_rules)"
            :titles="['未选择', '已选择']"
          ></el-transfer>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modelForm.visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: "index",
  data: function () {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      tableData: [],
      modelForm: {
        visible: false,
        rules: {
          name: [{ required: true, message: "名称不能为空" }],
        },
        id: null,
        name: "",
        learn_count: 100,
        regular_rule: [],
        grammar_rule: [],
      },
      regular_rules: {},
      grammar_rules: {},
    };
  },
  methods: {
    jump(i) {
      if (i === undefined) {
        i = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = i;
      }
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/trainingList",
        method: "get",
        data: { page: i, number: this.paginations.pageSize },
        succeed: (res) => {
          this.tableData = res.rows;
          this.paginations.total = res.total;
        },
      });
    },
    add() {
      this.modelForm.visible = true;
      this.modelForm.id = null;
      this.modelForm.name = "";
      this.modelForm.learn_count = 100;
      this.modelForm.regular_rule = [];
      this.modelForm.grammar_rule = [];
    },
    edit(row) {
      this.modelForm.visible = true;
      this.modelForm.id = row.id;
      this.modelForm.name = row.name;
      this.modelForm.learn_count = row.learn_count;
      this.modelForm.regular_rule = [];
      this.modelForm.grammar_rule = [];

      row.regular_rule.split(",").map((id) => {
        if (Object.keys(this.regular_rules).indexOf(id) !== -1) {
          this.modelForm.regular_rule.push(parseInt(id));
        }
      });
      row.grammar_rule.split(",").map((id) => {
        if (Object.keys(this.grammar_rules).indexOf(id) !== -1) {
          this.modelForm.grammar_rule.push(parseInt(id));
        }
      });
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.modelForm.id === null) {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/trainingAdd",
              method: "post",
              data: {
                id: this.modelForm.id,
                name: this.modelForm.name,
                learn_count: this.modelForm.learn_count,
                state: 0,
                regular_rule: this.modelForm.regular_rule.join(","),
                grammar_rule: this.modelForm.grammar_rule.join(","),
              },
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.modelForm.visible = false;
              },
            });
          } else {
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/trainingEdit",
              method: "put",
              data: {
                id: this.modelForm.id,
                name: this.modelForm.name,
                learn_count: this.modelForm.learn_count,
                regular_rule: this.modelForm.regular_rule.join(","),
                grammar_rule: this.modelForm.grammar_rule.join(","),
              },
              succeed: () => {
                this.jump();
                this.$message.success("保存成功");
                this.modelForm.visible = false;
              },
            });
          }
        }
      });
    },
    del(row) {
      this.delPopoverClose("del_popover_" + row.id);
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/trainingDel",
        method: "put",
        data: [row.id],
        succeed: () => {
          this.jump();
          this.$message.success("删除成功");
          this.delPopoverClose("del_popover_" + row.id);
        },
      });
    },
    cmd(row, cmd) {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/trainingCmd",
        method: "get",
        data: { id: row.id, cmd: cmd },
        succeed: () => {
          this.jump();
          this.$message.success("发送成功");
          this.modelForm.visible = false;
        },
      });
    },
    updateLexicon() {
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/updateLexicon",
        method: "get",
        succeed: () => {
          this.$message.success("更新成功");
        },
      });
    },
    delPopoverShow(ref) {
      this.$refs[ref].doShow();
    },
    delPopoverClose(ref) {
      this.$refs[ref].doClose();
    },
  },
  mounted: function () {
    this.jump(1);

    this.$store.dispatch("ajaxSetting", {
      // this.$store.dispatch("ajax", {
      url: "/api/regularModelList",
      method: "get",
      data: { page: 1, number: 999 },
      succeed: (res) => {
        for (const row of res.rows) {
          this.regular_rules[row.id] = { key: row.id, label: row.name };
        }
      },
    });

    this.$store.dispatch("ajaxSetting", {
      // this.$store.dispatch("ajax", {
      url: "/api/grammarModelsList",
      method: "get",
      data: { page: 1, number: 999 },
      succeed: (res) => {
        for (const row of res.rows) {
          this.grammar_rules[row.id] = { key: row.id, label: row.name };
        }
      },
    });
  },
};
</script>